<template>
  <a-card hoverable class="setting-warp" @click="handleOpenSite">
    <header class="header">
      <component
        class="icon"
        :is="icon"
        :size="32"
        :style="{
          color: iconColor
        }"
      ></component>
      <h3 class="pl-12px text-18px font-semibold">{{ name }}</h3>
    </header>
    <p class="description">{{ description }}</p>
  </a-card>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';

interface Props {
  /** 技术名称 */
  name: string;
  /** 技术描述 */
  description: string;
  /** 技术图标 */
  icon: string;
  /** 图标颜色 */
  iconColor?: string;
}
const props = withDefaults(defineProps<Props>(), {
  name: '',
  description: '',
  icon: '',
  iconColor: '#4e7cf7'
});

const emits = defineEmits(['goDetail']);

const router = useRouter();

// 点击前往相应的路由页面
const handleOpenSite = (): void => {
  emits('goDetail');
};
</script>

<style scoped lang="less">
.setting-warp {
  cursor: pointer;
  background-color: #ecf6ff;
  width: 220px;
  height: 270px;
  border: 1px solid #f9f9f9;
  margin: 30px 30px 0 30px;
  transition-property: all;
  &:hover {
    transform: translateY(-10px);
    // border-image-source: linear-gradient(to right, #0b53e3, #419be9);
    // border-image-slice: 1;
    border: 1px solid #419be9;
  }

  .header {
    position: relative;
    text-align: center;
    margin-top: 30px;

    .icon {
      position: relative;
    }
  }

  .description {
    padding: 15px;
  }
}
</style>
